import { getRowByField } from "@/hy_dev_lib/src";
import { CommonTooltipLabel } from "@/hy_dev_lib/src/components/PopoverTips";
import { Button, Form, Input, Layout, Space, Switch } from "antd";
import { useEffect } from "react";
import { formItemList } from "../type";
import useFormConfig from "../useFormConfig";
import "./index.less";

const { Sider } = Layout

interface IFormItemConfigProps {
    // formItemConfig: IFormItemConfig
    formConfig: ReturnType<typeof useFormConfig>
}
const FormItemConfig = (props: IFormItemConfigProps) => {
    const { formConfig } = props;
    const { editingItem, editFormItem } = formConfig
    const [form] = Form.useForm()

    const formItemInfo = getRowByField(formItemList, editingItem?.type, "type") || {}

    const { Config } = formItemInfo

    useEffect(() => {
        if (!editingItem?.name) return form.resetFields()
        onReset()
    }, [editingItem?.name])

    const onReset = () => {
        form.resetFields()
        form.setFieldsValue(editingItem)
    }

    const onSave = () => {
        form.validateFields().then((formValues) => {
            console.log("表单提交数据：", formValues)
            // TODO: 调接口保存配置 然后刷新数据
            editFormItem({
                ...editFormItem, ...formValues
            })
        })
    }

    return (<Sider className="page-sider right-sider form-item-config" width={360}>
        <div className="sider-header">
            <Space className="sider-title">
                编辑表单组件
                {
                    editingItem?.name && (<>
                        <span className="v-divider"></span>
                        <span className="common-tips">{editingItem?.label}</span>
                    </>)
                }
            </Space>
        </div>
        <div className="sider-box">
            <Form
                labelCol={{ flex: "96px" }}
                disabled={!editingItem?.name}
                form={form}
                preserve
            >
                <Form.Item
                    name={"colSpan"}
                    label={<CommonTooltipLabel label="占位格数" title={`用 1 到 24 的值来表示跨越范围。例如，一行三个等宽的列可以将其设置为 8 `} />}
                    rules={[
                        { required: true, message: "请输入占位格数" }
                    ]}
                >
                    <Input placeholder="请输入占位格数" />
                </Form.Item>
                <Form.Item
                    name={"name"}
                    label={"字段名称"}
                    rules={[
                        { required: true, message: "请输入字段名称" }
                    ]}
                >
                    <Input placeholder="请输入字段名称" />
                </Form.Item>
                <Form.Item
                    name={"label"}
                    label={"表单项名称"}
                    rules={[
                        { required: true, message: "请输入表单项名称" }
                    ]}
                >
                    <Input placeholder="请输入表单项字段名称" />
                </Form.Item>
                <Form.Item
                    name={"placeholder"}
                    label={"提示内容"}
                >
                    <Input placeholder="请输入提示内容" />
                </Form.Item>
                <Form.Item
                    name={"required"}
                    label={"是否必填"}
                >
                    <Switch />
                </Form.Item>
                <Form.Item
                    name={"requiredMessage"}
                    label={"必填验证提示"}
                >
                    <Input placeholder="请输入必填验证提示" />
                </Form.Item>
                {
                    Config && <Config form={form}></Config>
                }
            </Form>
        </div>
        <div className="sider-header">
            <div></div>
            <Space>
                <Button
                    // className="primary-outline-btn"
                    type="primary"
                    onClick={() => onSave()}>保存</Button>
                <Button onClick={onReset}>重置</Button>
            </Space>
        </div>
    </Sider>)
};

export default FormItemConfig;
